<template>
	<view class="team-info-item">
		<view class="top flex-between">
			<view class="d-flex">
				<u-image width="80rpx" height="80rpx" radius="10rpx" :src="data.team_logo"></u-image>

				<view style="margin-left: 30rpx;">
					<view class="name">{{ data.team_name }}</view>
					<view class="tags d-flex flex-wrap">
						<view v-for="(item, index) in data.tag" :key="item" class="tag">
							<!-- <u-tag
								:text="item"
								:bgColor="tagColor[index % tagColor.length]"
								size="mini"
								borderColor="rgba(0,0,0,0)"
							/> -->
							<!-- <u-tag
								:text="item"
								:bgColor="tagColor[index % tagColor.length]"
								size="mini"
								borderColor="rgba(0,0,0,0)"
							/> -->
							<u-tag :text="item" borderColor="#4BA677" style="" bgColor=" rgba(0,0,0,0)" color=" #4BA677"
								size="mini"></u-tag>
						</view>
					</view>
				</view>
			</view>

			<slot name="right"></slot>
		</view>

		<u-line color="#F3F3F3" customStyle="margin: 30rpx 0;"></u-line>

		<view class="description ellipsis-2">
			<slot name="description">{{ data.team_info }}</slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				tagColor: ['#ff8f05', '#4BA677'],
			}
		},
	}
</script>

<style lang="scss" scoped>
	team-info-item+team-info-item .team-info-item {
		margin-top: 30rpx;
	}

	.team-info-item {
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0px 6rpx 19rpx 1px rgba(0, 0, 0, 0.06);

		&+.team-info-item {
			margin-top: 30rpx;
		}

		.name {
			font-size: 30rpx;
		}

		.tags {
			margin-top: 14rpx;
			margin-left: -20rpx;

			.tag {
				margin-left: 20rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 200rpx;
			}
		}

		.description {
			font-size: 24rpx;
		}
	}
</style>